<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>欢迎使用iTalk聊天室</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <link rel="icon" href="../static/images/logo.png" >
  <script>
    function browserRedirect() {
      var sUserAgent = navigator.userAgent.toLowerCase();
      var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
      var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
      var bIsMidp = sUserAgent.match(/midp/i) == "midp";
      var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
      var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
      var bIsAndroid = sUserAgent.match(/android/i) == "android";
      var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
      var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
      if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {

      } else {
        console.log('在pc端浏览');
        window.location.href="./index.html"
      }
    }
    browserRedirect();
  </script>
  <link rel="stylesheet" href="../static/css/iconfont.css">
  <link rel="stylesheet" href="../static/css/iTalk.css">
</head>
<body>
<div id="app"></div>
<template id="tpl">
  <div class="tpl">
    <div class="it-warp" v-if="loginUser">
      <div class="it-panel" v-show="currentMenu=='session'">
        <div class="it-search-warp" >
          <img :src="loginUser.avatarUrl" alt="">
          <div class="it-search-group">
            <span class="iconfont icon-search"></span>
            <input type="text" placeholder="搜索" v-model="keyword">
          </div>
        </div>
        <div class="wt-session-listBox wt-scroll">
          <div class="wt-users-item" v-for="item in searchUser(keyword)"
               :class="{active:item.id==sessionId}"
               @click="changeSession(item)">
            <div class="wt-user-avatar">
              <img :src="item.avatarUrl" alt="">
            </div>
            <div class="wt-item-info">
              <div class="wt-item-name">
                {{item.name}}
                <span class="wt-message-time" v-if="getLastMessage(item.id).time">{{getLastMessage(item.id).time | friendlyTime}}</span>
              </div>
              <div class="wt-item-message">
                {{getLastMessage(item.id).content}}
                <span class="wt-message-num" v-if="getUnReaderNum(item.id)!=0">{{getUnReaderNum(item.id)}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="it-panel" v-show="currentMenu=='setting'">
        <div class="it-setting-banner">
          <div class="it-loginAvatar">
            <img :src="loginUser.avatarUrl" alt="">
          </div>
        </div>
        <div class="it-setting-list">
          <div class="it-setting-item">
            <span>用户名：{{loginUser.name}}</span>
          </div>
          <div class="it-setting-item">
            <span>消息提示音</span>
            <div class="it-switch">
              <input type="checkbox" id="voice" v-model="setting.isVoice">
              <label for="voice"></label>
            </div>
          </div>
          <div class="it-setting-item">
            <span>显示用户名称</span>
            <div class="it-switch">
              <input type="checkbox" id="name" v-model="setting.isName">
              <label for="name"></label>
            </div>
          </div>
          <div class="it-setting-item">
            <span>显示消息时间</span>
            <div class="it-switch">
              <input type="checkbox" id="switch" v-model="setting.isTime">
              <label for="switch"></label>
            </div>
          </div>
        </div>
        <span class="iconfont icon-bug it-bug" @click.stop="showLogs()"></span>
      </div>
      <div class="it-panel" v-show="currentMenu=='about'">
        <h2 class="it-about-title">关于</h2>
        <div class="it-about-list">
          <div class="it-about-item">版本：v1.0</div>
          <div class="it-about-item"><span>协议：MIT</span></div>
          <div class="it-about-item"><span>GitHub：<a href="https://github.com/cleverqin/node-websocket-Chatroom" target="_blank">源码地址</a></span></div>
          <div class="it-about-item"><span>邮箱：705597001@qq.com</span></div>
          <div class="it-about-item"><span><a href="https://github.com/cleverqin/node-websocket-Chatroom" target="_blank"><img src="https://img.shields.io/github/stars/cleverqin/node-websocket-Chatroom?label=Star&style=flat&logo=github" alt="" style="vertical-align: middle;"></a> <a href="https://github.com/cleverqin/node-websocket-Chatroom" target="_blank"><img src="https://img.shields.io/github/forks/cleverqin/node-websocket-Chatroom?label=Fork&style=flat&logo=github" alt="" style="vertical-align: middle;"></a></span></div>
        </div>
        <span class="iconfont icon-bug it-bug" @click.stop="showLogs()"></span>
      </div>
      <div class="it-menuBox">
        <div class="item-menu-item " :class="{active:currentMenu=='session'}" @click="currentMenu='session'">
          <span class="iconfont icon-comments"></span>
          <p>会话</p>
        </div>
        <div class="item-menu-item " :class="{active:currentMenu=='setting'}" @click="currentMenu='setting'">
          <span class="iconfont icon-cog"></span>
          <p>设置</p>
        </div>
        <div class="item-menu-item " :class="{active:currentMenu=='about'}" @click="currentMenu='about'">
          <span class="iconfont icon-info"></span>
          <p>关于</p>
        </div>
      </div>
      <div class="it-session-window" v-if="session">
        <div class="it-session-header">
          <span class="iconfont icon-left it-back" @click="sessionId=''"></span>
          <img :src="session.avatarUrl" alt="">
          <span>{{session.name}}</span>
          <span class="iconfont icon-phone" v-if="session.deviceType=='touch'"></span>
          <span class="iconfont icon-pc" v-if="session.deviceType=='pc'"></span>
          <template v-if="session.type=='group'">
            <span class="wt-session-address">({{sessionList.length}})</span>
          </template>
        </div>
        <div class="it-session-container" :style="{bottom:!isShow?'41px':'181px'}">
          <div class="wt-window-messageList wt-scroll" ref="messageList">
            <template v-for="item in messageList">
              <div class="wt-message-item" :class="item.from.id==loginUser.id?'wt-message-send':'wt-message-receive'" >
                <div class="wt-avatarBox">
                  <img :src="item.from.avatarUrl" alt="">
                </div>
                <div class="wt-message-body">
                  <template v-if="setting.isName">
                    <div class="wt-from-info"  v-if="item.from.id!=loginUser.id">
                      <span >{{item.from.name}}</span>
                      <span class="wt-time-span" v-if="setting.isTime">{{item.time | friendlyTime}}</span>
                    </div>
                    <div class="wt-from-info" v-else>
                      <span class="wt-time-span" v-if="setting.isTime">{{item.time | friendlyTime}}</span>
                      <span >{{item.from.name}}</span>
                    </div>
                  </template>
                  <div class="wt-message-text" v-html="parseText(item.content)"></div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="it-session-footer">
          <div class="it-send-form">
            <span class="iconfont icon-expression" @click.stop="showExpression()"></span>
            <div class="it-input"><input type="text" v-model="text" @keyup.enter="sendMessage(text)"></div>
            <span class="it-sendBtn" @click="sendMessage(text)">发送</span>
          </div>
          <div class="it-expression-warp" v-show="isShow">
            <div class="it-expression-list">
              <div class="it-expression-item" v-for="item in qqExpression" @click.stop="selectExpression(item)">
                <img :src="baseUrl+item.url" alt="" >
              </div>
            </div>
          </div>
        </div>
      </div>
      <transition name="slider">
        <div class="wt-logBox" v-show="isShowLog">
          <div class="wt-logHeader">
            连接日志
            <span class="wt-log-closeBtn iconfont icon-close" @click.stop="isShowLog=false"></span>
          </div>
          <div class="wt-log-container" @click.stop="">
            <div class="ui-scroll wt-log-list" id="log-container">
              <div class="wt-log-item" v-for="log in logs">
                <span :class="'wt-log-'+log.type">{{log.text}}</span>
                <span class="wt-log-time">{{log.time|formatTime}}</span>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <transition name="slider">
      <div class="wt-alter-message" v-show="isAlter">{{alterMessage}}</div>
    </transition>
    <login @login="userLogin" v-if="!loginUser"></login>
    <audio src="../static/images/8400.mp3" ref="audio"></audio>
  </div>
</template>
<template id="login">
  <div class="iTalk-container iTalk-loginBox">
    <div class="iTalk-loginForm-box">
      <transition name="slider">
        <div class="wt-error-message" v-if="errorMsg">{{errorMsg}}</div>
      </transition>
      <form class="iTalk-login-form">
        <div class="iTalk-loginUser-avatarBox">
          <img :src="user.avatarUrl" alt="" @click.stop="isShow=!isShow">
        </div>
        <div class="iTalk-form-inputBox">
          <input type="text" class="iTalk-user-name" placeholder="用户名" v-model="user.name">
          <input type="text" class="iTalk-user-password" placeholder="密码">
          <button type="button" class="iTalk-formBtn" @click="login(user)">登录</button>
        </div>
      </form>
    </div>
    <transition name="slider">
      <div class="iTalk-select-imgBox" v-show="isShow">
        <div class="iTalk-addAvatar-box">
          <input type="text" v-model="QQ" placeholder="输入QQ号添加使用QQ头像" @click.stop="" @keyup.enter="addQQAvatar(QQ)">
        </div>
        <ul class="iTalk-avatar-list">
          <li :class="{active:user.avatarUrl==item}" v-for="item in avatars">
            <img :src="item" alt="" @click="user.avatarUrl=item">
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<script src="../static/js/vue.min.2.2.0.js"></script>
<script src="../static/js/vue-resource.js"></script>
<script src="../static/js/socket.io.js"></script>
<script src="../static/js/example.js"></script>
</body>
</html>

